<template>
  <div class="energy-table">
    <div class="table-title">
      <h2>临安区公共机构数据中心机房能源消费统计表</h2>
    </div>
    <div class="table-content">
      <div class="table-select">
        <div class="table-selectItem">
          <label>填报单位：</label>
          <select style="max-width: 280px;" v-model="computerData.DepartmentName" @change="doSearch()">
            <option :key="i" v-for="(item,i) in departments" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="table-selectItem">
          <label>年份：</label>
          <select style="width:90px;" v-model="computerData.Year" @change="doSearch()">
            <option :key="n" v-for="n in selectYear" :value="n">{{n}}</option>
          </select>
          <select style="width: 90px;" v-model="computerData.TimeRanges" @change="doSearch()">
            <option value="0">上半年</option>
            <option value="1">下半年</option>
          </select>
        </div>
        <div class="table-selectItem">
          <label>制表：</label>
          <input type="text" class="tableSelect-input" v-model="computerData.OfficeAddress">
        </div>
      </div>
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td align="center" valign="middle" width="300px;">能耗名称</td>
          <td align="center" valign="middle" width="100px;">单位</td>
          <td align="center" valign="middle">数量</td>
        </tr>
        <tr>
          <td valign="middle">机房数量</td>
          <td align="center" valign="middle">个</td>
          <td align="center"><input type="text" v-model="computerData.Count"></td>
        </tr>
        <tr>
          <td valign="middle">机房建筑面积</td>
          <td align="center" valign="middle">平方米</td>
          <td align="center"><input type="text" v-model="computerData.Area"></td>
        </tr>
        <tr>
          <td valign="middle">机柜总数量</td>
          <td align="center" valign="middle">个</td>
          <td align="center"><input type="text" v-model="computerData.CabinetCount"></td>
        </tr>
        <tr>
          <td valign="middle">设备总功率</td>
          <td align="center" valign="middle">千瓦</td>
          <td align="center"><input type="text" v-model="computerData.TotalPower"></td>
        </tr>
        <tr>
          <td valign="middle" style="padding-left:20px;">其中：IT设备功率</td>
          <td align="center" valign="middle">千瓦</td>
          <td align="center"><input type="text" v-model="computerData.ComputerPower"></td>
        </tr>
        <tr>
          <td valign="middle" style="padding-left:60px;">空调设备功率</td>
          <td align="center" valign="middle">千瓦</td>
          <td align="center"><input type="text" v-model="computerData.AirConditionerPower"></td>
        </tr>
        <tr>
          <td valign="middle" style="padding-left:60px;">配电及附属设备功率</td>
          <td align="center" valign="middle">千瓦</td>
          <td align="center"><input type="text" v-model="computerData.OtherPower"></td>
        </tr>
        <tr>
          <td valign="middle">UPS装机容量</td>
          <td align="center" valign="middle">千伏安</td>
          <td align="center"><input type="text" v-model="computerData.UPSCapacitance"></td>
        </tr>
        <tr>
          <td valign="middle">总用电量</td>
          <td align="center" valign="middle">千瓦时</td>
          <td align="center"><input type="text" v-model="computerData.TotalPowerUsage"></td>
        </tr>
        <tr>
          <td valign="middle" style="padding-left:20px;">其中：IT设备用电量</td>
          <td align="center" valign="middle">千瓦时</td>
          <td align="center"><input type="text" v-model="computerData.ComputerPowerUsage"></td>
        </tr>
        <tr>
          <td valign="middle" style="padding-left:60px;">空调用电量</td>
          <td align="center" valign="middle">千瓦时</td>
          <td align="center"><input type="text" v-model="computerData.AirConditionerPowerUsage"></td>
        </tr>
        <tr>
          <td valign="middle" style="padding-left:60px;">照明及附属设备用电量</td>
          <td align="center" valign="middle">千瓦时</td>
          <td align="center"><input type="text" v-model="computerData.OtherElectricityConsumption"></td>
        </tr>
        <tr>
          <td valign="middle">其他能源消耗量</td>
          <td align="center" valign="middle">吨标准煤</td>
          <td align="center"><input type="text" v-model="computerData.OtherConsumption"></td>
        </tr>

      </table>
      <div class="table-button">
        <input type="button" value="保存" @click="submitEnergy" v-if="computerData.State!=1">
        <input type="button" value="打印" @click="prints()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [],
      departName: '',
      selectYear: [],
      yearHalf: '',
      year: '',
      computerData: {
        TimeRanges: 0,
        Count: 0,
        Area: 0,
        CabinetCount: 0,
        TotalPower: 0,
        ComputerPower: 0,
        AirConditionerPower: 0,
        OtherPower: 0,
        UPSCapacitance: 0,
        TotalPowerUsage: 0,
        ComputerPowerUsage: 0,
        AirConditionerPowerUsage: 0,
        OtherElectricityConsumption: 0,
        OtherConsumption: 0,
        DepartmentName: "",
        OfficeAddress: "",
        State: 0,
        Year: new Date().getFullYear()
      }
    }
  },
  methods: {
    async getDepartments() {
      const result = await this.$get("/api/user/departments");
      this.departments = result
      this.computerData.DepartmentName = result[0]
      this.doSearch()
    },
    async doSearch() {
      this.departName = this.computerData.DepartmentName
      this.year = this.computerData.Year
      this.yearHalf = this.computerData.TimeRanges
      const result = await this.$get(`/api/ComputerRoom/${this.year}/${this.yearHalf}`, {
        departmentName: this.computerData.DepartmentName,
      })
      console.log(result)
      if (result) {
        this.computerData = result
      } else {
        this.computerData = {
          TimeRanges: 0,
          Count: 0,
          Area: 0,
          CabinetCount: 0,
          TotalPower: 0,
          ComputerPower: 0,
          AirConditionerPower: 0,
          OtherPower: 0,
          UPSCapacitance: 0,
          TotalPowerUsage: 0,
          ComputerPowerUsage: 0,
          AirConditionerPowerUsage: 0,
          OtherElectricityConsumption: 0,
          OtherConsumption: 0,
          OfficeAddress: "",
          State: 0,
        }
        this.computerData.DepartmentName = this.departName
        this.computerData.Year = this.year
        this.computerData.TimeRanges = this.yearHalf
      }
    },
    prints() {
      if (window.print != null) {
        window.print();
      }
      else {
        alert('您没有安装打印机，请安装后继续!')
      }
    },
    async submitEnergy() {
      try {
        const result = await this.$post("/api/ComputerRoom", this.computerData)
        alert('操作成功')
      } catch (error) {
        alert(error.message)
      }
    }
  },
  created() {
    var num = new Date().getFullYear();
    for (var i = num - 13; i < num + 1; i++) {
      this.selectYear.unshift(i);
    }
    this.getDepartments()
  }
}
</script>

<style lang="scss" scoped>
.energy-table {
  padding: 25px 0;
}

.table-title {
  height: auto;
  margin-bottom: 25px;
  h2 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 16px;
  }
  span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
}

.table-content {
  height: auto;
  .table-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    .table-selectItem {
      select,
      input {
        height: 24px;
      }
      input.tableSelect-input {
        border: none;
        outline: none;
        border-bottom: 1px solid rgb(169, 169, 169);
        width: 280px;
      }
    }
  }
  table {
    td {
      padding: 5px 5px;
      input[type=text] {
        border-radius: 5px;
        border: 1px solid rgb(169, 169, 169);
        outline: none;
        padding-left: 5px;
        height: 24px;
        width: 400px;
      }
      i {
        color: red;
        font-size: 16px;
      }
    }
  }
  .table-button {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    input {
      width: 60px;
      margin-left: 25px;
    }
  }
}
</style>
